<template>
  <tooltip v-if="tips !== ''">
    <template slot="title">{{ tips }}</template>
    <avatar :size="avatarSize" :src="src" />
  </tooltip>
  <avatar v-else :size="avatarSize" :src="src" />
</template>

<script>
import Avatar from "ant-design-vue/es/avatar";
import Tooltip from "ant-design-vue/es/tooltip";

export default {
  name: "AvatarItem",
  components: {
    Avatar,
    Tooltip
  },
  props: {
    tips: {
      type: String,
      default: "",
      required: false
    },
    src: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      size: this.$parent.size
    };
  },
  computed: {
    avatarSize() {
      return (this.size !== "mini" && this.size) || 20;
    }
  },
  watch: {
    "$parent.size"(val) {
      this.size = val;
    }
  }
};
</script>
